<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>滑块</title>
	<link rel="stylesheet" href="../libs/layui/css/layui.css">
	<link rel="stylesheet" href="../css/slider.css">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
	<div class="layui-card">
		<div class="layui-card-header">
			form提交
		</div>
		<div class="layui-card-body">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>基本滑块</legend>
			</fieldset>

			<div id="slideTest1" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>定义初始值</legend>
			</fieldset>

			<div id="slideTest2" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>设置最大最小值</legend>
			</fieldset>

			<div id="slideTest3" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>设置步长</legend>
			</fieldset>

			<div id="slideTest4" class="demo-slider"></div>
			<br>
			<div id="slideTest5" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>设置提示文本</legend>
			</fieldset>

			<div id="slideTest6" class="demo-slider"></div>
			<br>
			<div id="slideTest7" class="demo-slider"></div>
			<div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>开启输入框</legend>
			</fieldset>

			<div id="slideTest8" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>开启范围选择</legend>
			</fieldset>

			<div id="slideTest9" class="demo-slider"></div>
			<div id="test-slider-tips2" style="position:relative; left: 30px; margin-top: -10px;"></div>
			<br>
			<div id="slideTest10" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>垂直滑块</legend>
			</fieldset>

			<div id="slideTest11" style="margin: 45px 30px; display: inline-block;"></div>
			<div id="slideTest12" style="margin: 45px 30px; display: inline-block;"></div>
			<div id="slideTest13" style="margin: 45px 30px; display: inline-block;"></div>
			<div id="slideTest14" style="margin: 45px 30px; display: inline-block;"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>自定义颜色</legend>
			</fieldset>

			<div id="slideTest15" class="demo-slider"></div>
			<br>
			<div id="slideTest16" class="demo-slider"></div>
			<br>
			<div id="slideTest17" class="demo-slider"></div>

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>禁用滑块</legend>
			</fieldset>

			<div id="slideTest18" class="demo-slider"></div>
		</div>
	</div>

	<script src="../libs/layui/layui.js"></script>
	<script src="../js/slider.js"></script>

</body>

</html>
